// 这里使用了 antd 中的 layout 组件
  import { Breadcrumb, Layout } from 'antd';
  import React, { useState } from 'react';
  import {Outlet} from "react-router-dom"
  import MainMenu from '@/components/MainMenu'
  
  const { Header, Content, Footer, Sider } = Layout;
  
  
  
  // 这里的 React.Fc 是 antd 提供的组件的ts数据类型
  const View: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    
    // const navigateTo = useNavigate()

    return (
      <Layout style={{ minHeight: '100vh' }}>
        {/* 左侧边栏 */}
        <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
          <div className="logo" />
          {/* 菜单栏 */}
          <MainMenu></MainMenu>
        </Sider>
        {/* 右边内容展示区 */}
        <Layout className="site-layout">
          {/* 右侧头部 */}
          <Header className="site-layout-background" style={{ padding: 0 }} >
            {/* 面包屑 */}
            <Breadcrumb style={{ lineHeight:"64px", paddingLeft:'12px' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
          </Header>
          {/* 右侧中部内容区 */}
          <Content style={{ margin: '16px 16px 0' }} className='site-layout-background'>
            {/* 内容窗口部分 */}
            {/* Outlet 用于展示路由组件，在当前组件中跳转二级路由，对应的路由组件会显示在下面的 Outlet 标签中 */}
            <Outlet></Outlet>
          </Content>
          {/* 右侧底部 */}
          <Footer style={{ textAlign: 'center', padding: 0, lineHeight: "48px" }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  };
  
  export default View;